<style scoped>
  .search {
    font-size: 1.5rem;
    background-color: #D9D9D9;
    padding: .5rem 0;
    position: relative;
  }

  .search input {
    width: 93.33%;
    margin: auto;
    display: block;
    height: 2rem;
    border-radius: .2rem;
    box-sizing: border-box;
    text-align: center;
  }

  .icon-search {
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    font-size: .8rem;
    color: #c2c2c2;
  }

  .icon-close1 {
    position: absolute;
    right: 1rem;
    top: 1.15rem;
    font-size: .8rem;
    color: #3c3c3c;
  }
</style>

<template>
  <div class="search">
    <i class="iconfont icon-search" :style="{left:left + 'px'}" v-show="searchIco"></i>
    <input type="text" :placeholder="placeholder" @input="searchChange($event)" v-model.trim="searchValue"/>
    <i class="iconfont icon-close1" @click="errorClick" v-show="!searchIco"></i>
  </div>
</template>

<script>
  import {Indicator} from 'mint-ui';
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    data(){
      return {
        searchIco: true
      }
    },
    mounted(){

    },
    props: {
      placeholder: {},//placeholder文字
      left: {},//搜素小图标距离左边的距离
    },
    methods: {
      searchChange(e){
        //方法私有化
        this.$emit('searchChange',this.searchValue,e);//把子组件的这个方法提供给父组件用并传参
        //方法公有化
        if (this.searchValue != '') {
          this.searchIco = false;
        } else {
          this.searchIco = true;
        }
      },
      errorClick(){
        this.searchValue = '';
        this.searchIco = true;
        this.$emit('errorClick')
      },
      ajax(e){ //模版  //每次输入都会触发;
        var that = this;
        //var value = e.target.value;//用不上
        clearTimeout(this.timer);//清除定时器
        this.timer = setTimeout(function () {//定时器需要在一秒后,才执行.执行前可能被清除
            if (that.searchValue == '') {
            } else {
              Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
              });
              app.ajax({
                type: 'get',
                url: that.$store.state.port + 'hotel/keywordList.json',
                data: {
                  cityId: that.fromCityCode,
                  keyword: that.value
                },
                dataType: 'jsonp'
              }).done(function (res) {
                Indicator.close();
              }).fail(function (res) {
                console.log('error');
                Indicator.close();
              });
            }
        }, 1000);
      }
    },
    computed: {},
    watch: {},
    components: {},
  }
</script>
